<template>
  <div class="header_box">
    <div class="header_left">
      <span>学生宿舍管理系统</span>
    </div>
    <div class="header_right">
      <span>欢迎:{{ userInfo.name }}</span>
      <el-button @click="openDialog()">修改密码</el-button>
      <div>
        <UpdatePassword @close="close()" :get-dialog="dialogVisible"></UpdatePassword>
      </div>
      <el-button @click="exit()">退出</el-button>
    </div>
  </div>
</template>

<script>

import UpdatePassword from "@/components/index/updatePassword";
import axios from "axios";

export default {
  name: "header",
  components: {UpdatePassword},
  data() {
    return {
      userInfo: {},
      dialogVisible: false
    }
  },
  methods: {
    exit() {
      this.$router.push("/login")
    },
    openDialog() {
      this.dialogVisible = true
    },
    close(value) {
      this.dialogVisible = value
    }
  },
  created() {
    axios({
      url: `http://localhost:8888/user/info`,
      method: "post",
      headers: {
        token: localStorage.getItem("token")
      }
    }).then((res) => {
      this.userInfo = res.data
      localStorage.setItem("user", JSON.stringify(this.userInfo))
    })
  }
}
</script>

<style scoped>

.header_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_left {
  margin-left: 2rem;
  font-size: 25px;
  font-weight: 600;
}

.header_right {
  width: 300px;
  margin-right: 2rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

</style>